/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("tooltip") {
    $titon-tooltip-class: generate-class-name($titon-tooltip);
    $titon-tooltip-arrow-class: generate-class-name($titon-tooltip, "arrow");
    $titon-tooltip-arrow-width: map-get($titon-tooltip, "arrow-width");
    $titon-tooltip-arrow-width-double: ($titon-tooltip-arrow-width * 2);
    $titon-tooltip-animations: map-get($titon-tooltip, "animations");
    $titon-tooltip-background-color: map-get($titon-tooltip, "background-color");

    #{$titon-tooltip-class} {
        position: absolute;
        max-width: 18rem;
        z-index: map-get($titon-settings-zindex, "tooltip");
        transition: all map-get($titon-tooltip, "transition");
        // Use padding as its calculated in box size widths
        padding: #{$titon-tooltip-arrow-width-double}px;
    }

    #{$titon-tooltip-arrow-class} {
        width: 0;
        height: 0;
        border: #{$titon-tooltip-arrow-width}px solid transparent;
        position: absolute;

        &::after {
            content: "";
            border: #{($titon-tooltip-arrow-width - 2)}px solid transparent;
            position: absolute;
        }
    }

    #{generate-class-name($titon-tooltip, "inner")} {
        padding: theme-setting("small-padding");
        position: relative;
        background: $titon-tooltip-background-color;
    }

    //-------------------- Positions --------------------//

    #{$titon-tooltip-class} {
        &.top #{$titon-tooltip-arrow-class},
        &.bottom #{$titon-tooltip-arrow-class} {
            transform: translateX(-50%);
            left: 50%;
        }

        &.left #{$titon-tooltip-arrow-class},
        &.right #{$titon-tooltip-arrow-class} {
            transform: translateY(-50%);
            top: 50%;
        }

        //----- Top -----//

        &.top-left #{$titon-tooltip-arrow-class} {
            border-top-color: $titon-tooltip-background-color;
            border-right-color: $titon-tooltip-background-color;
            right: 0;
        }

        &.top #{$titon-tooltip-arrow-class} {
            border-top-color: $titon-tooltip-background-color;
        }

        &.top-right #{$titon-tooltip-arrow-class} {
            border-top-color: $titon-tooltip-background-color;
            border-left-color: $titon-tooltip-background-color;
            left: 0;
        }

        &.top #{$titon-tooltip-arrow-class},
        &.top-left #{$titon-tooltip-arrow-class},
        &.top-right #{$titon-tooltip-arrow-class} {
            bottom: -#{$titon-tooltip-arrow-width-double}px;
        }

        //----- Middle -----//

        &.left #{$titon-tooltip-arrow-class} {
            border-left-color: $titon-tooltip-background-color;
            right: -#{$titon-tooltip-arrow-width-double}px;
        }

        &.right #{$titon-tooltip-arrow-class} {
            border-right-color: $titon-tooltip-background-color;
            left: -#{$titon-tooltip-arrow-width-double}px;
        }

        //----- Bottom -----//

        &.bottom-left #{$titon-tooltip-arrow-class} {
            border-bottom-color: $titon-tooltip-background-color;
            border-right-color: $titon-tooltip-background-color;
            right: 0;
        }

        &.bottom #{$titon-tooltip-arrow-class} {
            border-bottom-color: $titon-tooltip-background-color;
        }

        &.bottom-right #{$titon-tooltip-arrow-class} {
            border-bottom-color: $titon-tooltip-background-color;
            border-left-color: $titon-tooltip-background-color;
            left: 0;
        }

        &.bottom #{$titon-tooltip-arrow-class},
        &.bottom-left #{$titon-tooltip-arrow-class},
        &.bottom-right #{$titon-tooltip-arrow-class} {
            top: -#{$titon-tooltip-arrow-width-double}px;
        }
    }
    
    //-------------------- Animations --------------------//

    #{$titon-tooltip-class} {
        @if (is-feature-enabled("all-animations") or index($titon-tooltip-animations, "fade")) {
            &.fade {
                opacity: 0;
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-tooltip-animations, "from-above")) {
            &.from-above {
                transform: scale(1.2);

                &.show {
                    transform: scale(1);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-tooltip-animations, "from-below")) {
            &.from-below {
                transform: scale(0.8);

                &.show {
                    transform: scale(1);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-tooltip-animations, "flip-rotate")) {
            &.flip-rotate {
                transform: rotate(-15deg);

                &.show {
                    transform: rotate(0deg);
                }
            }
        }
    }

    //-------------------- Trigger --------------------//

    #{generate-class-name($titon-tooltip, "trigger")} {
        position: relative;

        &.top,
        &.bottom {
            transform: translateX(-50%);
            left: 50%;
        }

        &.top,
        &.top-left,
        &.top-right {
            bottom: 100%;
        }

        &.left,
        &.top-left,
        &.bottom-left {
            right: 100%;
        }

        &.right,
        &.top-right,
        &.bottom-right {
            left: 100%;
        }

        &.left,
        &.right {
            transform: translateY(-50%);
            top: 50%;
        }

        &.bottom,
        &.bottom-left,
        &.bottom-right {
            top: 100%;
        }

        &:not(:hover) {
            #{$titon-tooltip-class} {
                display: none;
            }
        }
    }
}
